<template>
    <div>
        <van-tabs v-model="id"  @click="addid" animated swipeable>
        <van-tab v-for="item,index in brotherCategory" :name="item.id" :title="item.name" :key="index">
            <div class="box">
                <p>{{ item.name }}</p>
                <p style="color: #000000; font-weight: 700;">{{ item.front_desc }} </p>
            </div>
            <div class="box-two">
                <div class="sizebox" v-for="item in GoodsListsList" :key="item.id">
                    <van-image :src="item.list_pic_url">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>
                    <span>{{ item.name }}</span>
                    <span style="color: #8b0052;">￥{{item.retail_price.toFixed(2)}}元</span>
                </div>
            </div>
        </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { Category, GoodsLists } from '@/http/api'

export default {
  data () {
    return {
      id: 0,
      brotherCategory: [],
      GoodsListsList: []
    }
  },
  methods: {
    async getCategortList () {
      const res = await Category(this.id)
      this.brotherCategory = res.data.data.brotherCategory
    },
    // 获取商品列表
    async getGoodsLists () {
      const res = await GoodsLists(this.id)
      this.GoodsListsList = res.data.data.data
    },
    // 点击切换其它
    async addid (name) {
      const res = await GoodsLists(name)
      this.GoodsListsList = res.data.data.data
    }
  },
  created () {
    this.id = +this.$route.query.id
    this.getCategortList()
    this.getGoodsLists()
  },
  watch: {
    async id (a, b) {
      const res = await GoodsLists(a)
      this.GoodsListsList = res.data.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    background-image: url('http://yanxuan.nosdn.127.net/92357337378cce650797444bc107b0f7.jpg');
    background-size: 400px;
    p{
        text-align: center;
        font-size: 17px;
        margin-top: 20px;
        color: #fff;
        font-weight: 700;
    }
}
.box-two{
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .sizebox{
        width: 50%;
        img{
            width: 100%;
        }
        span{
            font-size: 14px;
            display: block;
            text-align: center;
        }
    }
}

</style>
